import React, { useRef } from 'react'
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
import Main from './layout/main'
import Login from './layout/login'
import { connect } from 'react-redux'
import Particles from "react-tsparticles"
import { useSize} from 'ahooks'
function App(props) {
  const dom = document.querySelector('body');
  const size = useSize(dom)
  console.log(size)
  return (
    <>
    <Particles
        id="tsparticles"
        height= {size.height}
        options={{
          background: {
            color: {
              value: "#0d47a1",
            },
          },
          fpsLimit: 60,
          interactivity: {
            detectsOn: "canvas",
            events: {
              onClick: {
                enable: true,
                mode: "push",
              },
              onHover: {
                enable: true,
                mode: "repulse",
              },
              resize: true,
            },
            modes: {
              bubble: {
                distance: 400,
                duration: 2,
                opacity: 0.8,
                size: 40,
              },
              push: {
                quantity: 4,
              },
              repulse: {
                distance: 200,
                duration: 0.4,
              },
            },
          },
          particles: {
            color: {
              value: "#ffffff",
            },
            links: {
              color: "#ffffff",
              distance: 150,
              enable: true,
              opacity: 0.5,
              width: 1,
            },
            collisions: {
              enable: true,
            },
            move: {
              direction: "none",
              enable: true,
              outMode: "bounce",
              random: false,
              speed: 6,
              straight: false,
            },
            number: {
              density: {
                enable: true,
                value_area: 800,
              },
              value: 80,
            },
            opacity: {
              value: 0.5,
            },
            shape: {
              type: "circle",
            },
            size: {
              random: true,
              value: 5,
            },
          },
          detectRetina: true,
        }}
      ></Particles>
      <div style={{ position: 'fixed', width: '100%', height: '100%', left: 0, top: 0 }}>
        <Router>
          <Switch>
            {/* 先写其他的路由， 路由从上到下匹配 */}
            <Route path="/login" component = { Login } />
            <Route path="/" >
              {
                // localStorage.getItem('isLogin') === 'true' ? <Main /> : <Redirect to="/login" />
                props.isLogin ? <Main /> : <Redirect to="/login" />
              }
            </Route>
          </Switch>
        </Router>
      </div>
      
    </>
  )
}

export default connect(
  (state) => {
    return {
      isLogin: state.getIn(['user', 'isLogin'])
    }
  }
)(App)
